<template>
  <div :id="target"
       style="min-height:200px;width:160px;">
    <el-menu v-if="data!=null&&data.length>0"
             router
             :default-openeds="menuInfo.vertical.keyPath"
             :default-active="menuInfo.vertical.key"
             :unique-opened="opened"
             :mode="nav_model"
             @open="handleOpen"
             @close="handleClose"
             @select="handleSelect"
             background-color="#324057"
             text-color="#ffffff"
             active-text-color="#ffd04b"
    >
      <template v-for="(x,index) in menuInfo.menus">
        <el-submenu v-if="x.children.length>0" :index="x.id+''">
          <template slot="title">
            <span>{{x.name}}</span>
          </template>
          <template v-for="(y,index) in x.children">
            <el-menu-item-group v-if="y.children.length>0">
              <template slot="title">
                <span>{{y.name}}</span>
              </template>
              <el-menu-item v-for="(z,index) in y.children" :key="z.id" :index="z.path">
                {{z.name}}
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item v-else :index="y.path">
              {{y.name}}
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="x.path">
          {{x.name}}
        </el-menu-item>
      </template>
    </el-menu>
    <div v-else-if="data!=null&&data.length==0" style="text-align: center;margin-top:20%">
      <el-tag type="info">
        未配置管理菜单
      </el-tag>
    </div>
  </div>
</template>
<script type="es6">
  export default {
    data() {
      return {
        target:"slideMenu",
        opened: true,
        data: null
      }
    },
    props: ['nav_model'],
    computed: {
      menuInfo() {
        return this.$store.state.menuInfo;
      }
    },
    methods: {
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.getAllMenusTreeByAccount,"id":this.target,background:"rgba(50,64,87,1)","text":"加载菜单"});
        this.proAPI.getJson(this.proAPI.URLS.getAllMenusTreeByAccount).then((res) => {
            this.$store.state.menuInfo.menus = res.data;
            this.data = res.data;
        })
      },
      handleOpen(index, indexPath) {
        // console.log("菜单打开");
        // console.log(index);
        // console.log(indexPath);
      },
      handleClose(index, indexPath) {
        // console.log("菜单关闭");
        // console.log(index);
        // console.log(indexPath);
      },
      handleSelect(index, indexPath) {
        // console.log("选中");
        // console.log(index);
        // console.log(indexPath);
        this.$store.commit("modifyMenuInfoActiveVertical", {key: index, keyPath: indexPath});
      }
    },
    mounted() {
      this.init();
      console.log(this.$route)
    }
  }
</script>
<style scoped>
  /**
    2.4.11出现了一条边线。。。还强制加了一个最小宽度为200px。我信了你的邪
   */
  .el-menu{
    border-right:none;
  }
  .el-submenu .el-menu-item {
    max-width: 100%;
    min-width: 160px;
  }
  .el-menu-item:focus, .el-menu-item:hover {
    outline: none;
    background-color: #ffffff;
  }
</style>
